<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>选择二维码</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<script src="js/remstyle.js"></script>
		<link rel="stylesheet" href="assets/mui/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/min_page.css" />
		<link rel="stylesheet" type="text/css" href="css/sameInfo.css" />
		<link rel="stylesheet" type="text/css" href="css/material_QR_code_add.css" />
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="application/javascript " src="js/jquery-1.7.2.min.js "></script>
		<script src="layer/layer.js"></script>
		<link rel="stylesheet" type="text/css" href="layer/skin/layer.css" />
		<script src="js/config.js"></script>
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
	</head>
	<style>
		
	</style>

	<body>
		<!--顶部-->
		<!--顶部-->
		<div class="top" style="width: 100%;background: none;border: none;">
			<div class="top-one" onclick="javascript :history.back(-1);">
				<span style="font-size: 0.5rem; color: #fff;opacity: 0.8;" class="fa fa-angle-left"></span>
			</div>
			<!--<div class="point">
				<img src="img_page/3point.png" />
			</div>-->
		</div>
		<!--内容-->
		<div class="code_con">
			<div class="code_list_a" id="second_template">
				<div style="position: relative;">
					<img class="code_list_img" src="img_page/code_bgp2.png" />
					<button id="code_list_qr_a" class="code_list_qr_a" disabled="" onclick="open_edit()">		
						<img id="my_code"  src="img_page/qr_code.png" />
					</button>

				</div>
			</div>

		</div>
		<div class="code_con">
			<div class="code_list_b" id="first_template" >
				<div style="position: relative;">
					<img class="code_list_img" src="img_page/code_bgp.png" />
					<button id="code_list_qr" class="code_list_qr_a " disabled="" onclick="open_edit()">		
						<img id="my_code_a"  src="img_page/qr_code.png" />
					</button>

				</div>
			</div>

		</div>

		<!--底部-->
		<button class="code_bottom" onclick="code_edit()">编辑修改</button>
		<!--弹出层-->
		<div id="first_code" class="code_edit" onclick="close_code()"></div>
		<div id="first_code_con" class="code_edit_con">
			<!--上传二维码-->
			<div class="code_up" style="margin-bottom: 0.3rem;">

				<div class="code_edit_upload">
					<input type="file" id="file" class="filepath" onchange="imgPreview(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
					<img src="img_page/code_edit_upload.png" />
				</div>
				<span class="code_ts">上传二维码</span>
			</div>
			<!--已上传列表-->
			<div class="code_list">

				<div class="code_list_info" v-for='v in code_list' :data-id="v.id">
					<div class="code_list_info_left">
						<img class="qr_img" :src="v.url" @click="my_img(v.url)" />
						<span class="code_info_name">{{v.qr_name}}</span>
					</div>
					<div class="code_list_info_left">
						<!--<img class="edit_code" src="img_page/code_edit.png" />-->
						<img style="margin-left: 0.2rem;" @click="code_del(v.id)" class="edit_code" src="img_page/code_del.png" />
					</div>
				</div>

			</div>

		</div>
		<!--上传样式-->
		<div class="add_code">
			<div style="width: 100%;display: flex;align-items: center;flex-direction: column;">
				<form method="post" id="save_form" style="width: 100%;display: flex;align-items: center;flex-direction: column;">
					<div class="show_code" style="">
						<img src="img_page/qr_code.png" id="img3" />
					</div>
					<span style="color: #8d8d8d;display: inline-block;">为方便以后使用，命个名吧!</span>
					<input type="text" id="qr_name" placeholder="为方便以后使用，命个名吧!" />
					<img style="display: none;" src="" id="img_data" />
				</form>
				<button class="add_code_btn" onclick="saveQr()">保存</button>
			</div>
		</div>

		<!--删除弹出框-->
		<!--弹出层-->
		<div id="bgMask" class="bg" style=""></div>
		<!--灰度背景-->
		<!--弹出层内容-->
		<div id="infoBox" style="" class="infobox_del">
			<div class="infobox_del_con">确认删除？</div>
			<div class="infobox_del_bottom">
				<button onclick="hideInfoBox();">取消</button>
				<button onclick="sureInfoBox();">确定</button>
			</div>
		</div>
	</body>
	<script src="js/cropper.min.js"></script>
	<script>
		
		
			var formData;
			function imgPreview(fileDom) {
							$("#prompt3").css("display", "none");
				//判断是否支持FileReader
				if(window.FileReader) {
					var reader = new FileReader();
				} else {
					alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
				}
				//获取文件
				var file = fileDom.files[0];
				var imageType = /^image\//;
				//是否是图片
				if(!imageType.test(file.type)) {
					alert("请选择图片！");
					return;
				}
				//读取完成
				reader.onload = function(e) {
					//图片路径设置为读取的图片
				document.getElementById('img3').src = this.result;
				//$("#img_data").val(this.result)
				document.getElementById('img_data').src = this.result;
				$("#first_code_con").css("display", "none");
				$(".add_code").css("display", "block");
				};
				reader.readAsDataURL(file);
				formData = new FormData();
				formData.append('file', $('#file')[0].files[0]); //添加图片信息的参数
			}
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		/*上传图片*/
//		function changepic() {
//			$("#prompt3").css("display", "none");
//			var reads = new FileReader();
//			f = document.getElementById('file').files[0];
//			reads.readAsDataURL(f);
//			reads.onload = function(e) {
//				document.getElementById('img3').src = this.result;
//				//$("#img_data").val(this.result)
//				document.getElementById('img_data').src = this.result;
//				$("#first_code_con").css("display", "none");
//				$(".add_code").css("display", "block");
//			};
//		}
		/*点击编辑*/
		function code_edit(){
			$('.code_list_qr_a').each(function(i){
				if(v_param == i) {
					this.removeAttribute("disabled")
				}else{
					this.removeAttribute("disabled")
				}
			})
			$('.code_bottom').html('保存并使用')
			$('.code_bottom').attr("onclick","save_my_code()")
			
		}
		function save_my_code(){
			console.log(code_list.url)		
			$.ajax({
					type: "get",
					url: v_url + "/wechat/material/saveWxQr",
					data: {
						template:v_param,
						url:code_list.url,
						c_user_id:c_user_id
					},
					success: function(res) {

						if(res.code == 200) {
							layer.msg("保存成功", function() {
								window.location.href='material_QR_code_list.html?c_user_id='+c_user_id
							})

						} else {
							console.log(333)
							layer.msg("保存失败")
						}
					}
				});
		}
		/*打开侧边*/
		function open_edit() {
			document.getElementById('first_code').style.display = 'block';
			document.getElementById('first_code_con').style.display = 'block';
		}
		/*点击空白关闭弹出层*/
		function close_code() {
			document.getElementById('first_code').style.display = 'none';
			document.getElementById('first_code_con').style.display = 'none';
			$(".add_code").css("display", "none");
		}

		//alert(v_param);
		if(v_param == 0) {
			document.getElementById('first_template').style.display = 'block';
			document.getElementById('second_template').style.display = 'none';
		} else {
			document.getElementById('second_template').style.display = 'block';
			document.getElementById('first_template').style.display = 'none';
		}

		function compress(img) {
			canvas.width = img.width;
			canvas.height = img.height;

			//利用canvas进行绘图

			//将原来图片的质量压缩到原先的0.2倍。
			var data = canvas.toDataURL('image/jpeg', 0.2); //data url的形式

			return data;
		}
		//alert(ctx)

		/*保存二维码*/
		function saveQr() {
			var img_data = $("#img_data").val();
			var qr_name = document.getElementById('qr_name').value;
//			var cas = $('#img_data').cropper('getCroppedCanvas'); //获取被裁剪后的canvas
//			base64url = cas.toDataURL('image/png'); //转换为base64地址形式
//			//var base64=compress(img_data)
//			var formData = new FormData($("#save_form")[0]);
//			//console.log(base64url);
			//formData.append("imgBase64", encodeURIComponent(base64url)); //
			formData.append("qr_name", qr_name); //
			formData.append("c_user_id", c_user_id); //
			if(!qr_name) {
				layer.msg('请输入完整信息')
			} else {
				$.ajax({
					type: "post",
					url: v_url + "/wechat/material/saveQr",
					data: formData,
					async: false,
					cache: false,
					contentType: false,
					processData: false,
					success: function(res) {

						if(res.code == 200) {
							console.log(2222)
							layer.msg("保存成功", function() {
								window.location.reload()
							})

						} else {
							console.log(333)
							layer.msg("保存失败")
						}
					}
				});
			}

		}

		var code_list = new Vue({
			el: '.code_list',
			data: {
				code_list: [],
				url:''
			},
			created: function() {
				this.getList();
			},
			methods: {
				getList: function() {
					console.log("11111");
					var that = this;
					$.ajax({
						type: "get",
						url: v_url + "/wechat/material/getQrList",
						data: {
c_user_id:c_user_id
						},
						async: true,
						success: function(res) {
							var list = res.data;

							that.code_list = list;

							console.log(that.code_list);
						}
					});

				},
				code_del: function(id) {
					console.log(this.code_list)
					var that = this;
					var code_list = that.code_list;

					$.ajax({
						type: "get",
						url: v_url + "/wechat/material/deleteQr",
						data: {
							ids: id,
							c_user_id:c_user_id
						},
						async: true,
						success: function(res) {
							if(res.code == 200) {
								layer.msg('删除成功')
								var new_code_list = [];
								for(var i = 0; i < code_list.length; i++) {
									var v_id = code_list[i].id;
									if(id != v_id) {
										new_code_list.push(code_list[i]);
									}
								}
								that.code_list = new_code_list;
							}
						}
					});
				},
				/*点击图片替换*/
				my_img: function(url) {
					console.log(url)
					var that=this
					if(v_param==0){
						var obj = document.getElementById("my_code_a");
					}else{
						var obj = document.getElementById("my_code");
					}
					
					obj.src = url;
					document.getElementById('first_code').style.display = 'none';
					document.getElementById('first_code_con').style.display = 'none';
					that.url=url
					//console.log(src)

				}
			}
		})
	</script>

</html>